﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="5.aspx.cs" Inherits="BaseWeb.拖拽研究._4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>复制拖动</title>
    <%--
    前面的例子都是移动元素，另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。
     
    helper可以指定为“original”, "clone"，其中"original"是默认值，即拖动自身，而clone表示创建自身的一个克隆用于拖拽。
    helper还可以指定为函数，该函数返回一个自定义的DOM元素用于拖拽。
    当不是拖动自身的时候，需要在target上指定drop事件函数，在该函数中将特定的元素添加到target容器上，否则drop的时候什么事情都不会发生。
    简单复制的例子如下：
    --%>

    <script src="../../js/jquery-1.7.min.js" type="text/javascript"></script>

    <script src="../../js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

    <script>
        $(function()
        {
            $("#dragsource").draggable({
                helper: "clone"
            });
            $("#container").droppable({
                drop: function(event, ui)
                {
                    $(this).append($("<p style='position:absolute;left:" + ui.offset.left + ";top:" + ui.offset.top + "'>clone</p>"));
                }
            });
        })
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="dragsource">
        <p>
            拽我!</p>
    </div>
    <div id="container" style="background-color: gray; height: 300">
    </div>
    <!-- End container -->
    </form>
</body>
</html>
